﻿function restoreButton(element) {
    if ($(element).data('type') == 'add') {
        $(element).html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>');
        $(element).data('status', 'off');
    }
    else if ($(element).data('type') == 'remove') {
        $(element).html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>');
        $(element).data('status', 'off');
    }
}

$(document).ready(function () {
    $('#InitialDate').datetimepicker({
        useCurrent: false,
        defaultDate: new Date().setDate(new Date().getDate() - new Date().getDay()),
        daysOfWeekDisabled: [0],
        locale: 'es',
        ignoreReadonly: true
    });

    $('#EndDate').datetimepicker({
        useCurrent: false,
        defaultDate: new Date(),
        daysOfWeekDisabled: [0],
        locale: 'es',
        ignoreReadonly: true
    });

    $(".datepicker").on("dp.change", function (e) {
        $("#grid-data").bootgrid("reload");
    });

    $("#grid-data").bootgrid({
        ajax: true,
        post: function () {
            /* To accumulate custom parameter with the request object */
            return {
                init: $('#InitialDate-Val').val(),
                end: $('#EndDate-Val').val()
            };
        },
        url: urlGrid,
        formatters: {
            "link": function (column, row) {
                var components =
                    '<div style="float: left; padding: 4px 4px 4px 5px;"><button type="button" role="button" class="btn btn-default" data-status="off" data-type="add" data-id=\"' + row.Id + '\" data-username=\"' + row.UserName + '\">' +
                        '<span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button></div>' +
                    '<div style="float: left; padding: 4px;"><button type="button" role="button" class="btn btn-default" data-status="off" data-type="remove" data-id=\"' + row.Id + '\" data-username=\"' + row.UserName + '\">' +
                        '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></div>';
                return components;
            }
        },
    labels: {
        noResults: "Ningún elemento encontrado",
        infos: "Mostrando del {{ctx.start}} al {{ctx.end}} de {{ctx.total}} elemento(s)",
        loading: "Cargando",
        refresh: "Actualizar",
        search: "Buscar"
    }
    }).on("loaded.rs.jquery.bootgrid", function () {
        /* Executes after data is loaded and rendered */
        $("#grid-data").find(".btn.btn-default").on("click", function (e) {
            var element = this;
            if ($(element).data('status') == 'off') {
                if ($(element).data('type') == 'add') 
                    $(element).html('¿Agregar?');
                else if ($(element).data('type') == 'remove')
                    $(element).html('¿Eliminar?');
                $(element).data('status', 'on');
                setTimeout(function () {
                    restoreButton(element);
                }, 1000);
            }
            else if ($(element).data('status') == 'on') {
                if ($(element).data('type') == 'add') {
                    $('#Id').val($(element).data('id'));
                    $('#UserName').val($(element).data('username'));
                    $('#ActionPost').val('add');
                    $('#petitions-form').submit();
                }
                else if ($(element).data('type') == 'remove') {
                    $('#Id').val($(element).data('id'));
                    $('#UserName').val($(element).data('username'));
                    $('#ActionPost').val('remove');
                    $('#petitions-form').submit();
                }
            }
        });
    });
});